/**
 * @Description:登录主入口
 * @author 云离
 * @date: 2018/12/28
 */
import React, { Component } from 'react'
import {actions} from "../../../../reducers/main"
import { connect } from 'react-redux'
import {withRouter} from "react-router-dom"
import {message, Spin, Table, Switch, Button, Icon, Pagination, Modal, Tag} from 'antd'
import MyForm from '../../../components/Form'
import axios from '../../../../apis/api'
import qs from 'qs'
const {confirm} = Modal


const mapStateToProps = (state, ownProps) => {
    return {
        vwAgentCashStat: state.main.vwAgentCashStat,
        vwAgentCashDayStat: state.main.vwAgentCashDayStat
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        fetchInitData: (next) => dispatch(actions.fetchInitData(next))
    }
}

const formItems = [{
    label: '商户名称',
    key: 'businessName',
    type: 'input'
}, {
    label: '变更原因',
    key: 'opType',
    type: 'input'
}, {
    label: '支付类型',
    key: 'payType',
    type: 'select',
    options: [{
        label: '所有',
        value: ''
    }]
}, {
    label: '变动开始时间',
    key: 'params[beginTime]',
    type: 'DatePicker',
}, {
    label: '变动结束时间',
    key: 'params[endTime]',
    type: 'DatePicker',
}]

class CashChange extends Component {
    state = {
        initForm: {
            businessName: '',
            opType: '',
            payType: '',
            'params[beginTime]': null,
            'params[endTime]': null
        },
        formItmes: formItems,
        searchParam: {},
        loading: false,
        depMap: {},
        pageSize: 10,
        curPage: 1,
        tableData: {
            total: 0,
            rows: []
        },
        payTypes: [], // 支付类型
        payTypesMap:{},
    }

    handleSearch = (value) => {
        this.setState({
            curPage: 1,
            searchParam: value
        }, this.searchTable)
    }

    componentDidMount() {
        this.init()
    }
    init = async () => {
        const result = await axios.get('/channel/channelOrder/params')
        if (result.code === 0) {
            const {payerPayTypes} = result.data
            const newFormItems = JSON.parse(JSON.stringify(formItems))
            const payTypesMap = {}
            payerPayTypes.forEach(item => {
                newFormItems[2].options.push({
                    label: item.payLabel,
                    value: item.payType
                })
                payTypesMap[item.payType] = item.payLabel
            })

            this.setState({
                formItmes: newFormItems,
                payTypesMap: payTypesMap
            })
            this.searchTable()
        }
    }

    searchTable = async () => {
        const {pageSize, curPage, searchParam, depMap} = this.state
        const query = {
            orderByColumn: 'createTime',
            isAsc: 'desc',
            pageSize,
            pageNum: curPage,
            'params[beginTime]': (searchParam.params && searchParam.params.beginTime && searchParam.params.beginTime.format('YYYY-MM-DD')) || '',
            'params[endTime]': (searchParam.params && searchParam.params.endTime && searchParam.params.endTime.format('YYYY-MM-DD')) || '',
            businessName: searchParam.businessName,
            opType: searchParam.opType,
            payType: searchParam.payType,
        }
        try {
            this.setState({
                loading: true
            })
            const result = await axios.post('/channel/businessCashChange/list', qs.stringify(query))
            console.log(result)
            if (result.code === 0) {
                this.setState({
                    tableData: result,
                    loading: false
                })
            } else {
                this.setState({
                    loading: false
                })
                message.error(result.msg)
            }
        } catch (e) {
            this.setState({
                loading: false
            })
            message.error(e.message)
        }
    }
    //翻页
    handlePageChange = (page, pageSize) => {
        this.setState({
            curPage: page
        },this.searchTable)
    }

    onShowSizeChange = (current, pageSize) => {
        this.setState({
            pageSize: pageSize,
            curPage: current,
        }, this.searchTable)
    }

    render() {
        const {initForm, formItmes, loading, tableData, curPage, pageSize, payTypesMap} = this.state
        const columns = [{
            title: '订单号',
            dataIndex: 'orderId',
            key: 'orderId'
        }, {
            title: '商户名称',
            dataIndex: 'businessName',
            key: 'businessName'
        }, {
            title: '变更原因',
            dataIndex: 'remark',
            key: 'remark'
        }, {
            title: '支付类型',
            dataIndex: 'payType',
            key: 'payType',
            render: (value, data) => {
                return <span>{payTypesMap[value]}</span>
            }
        }, {
            title: '变更前金额',
            dataIndex: 'preAmount',
            key: 'preAmount'
        }, {
            title: '变更金额',
            dataIndex: 'amount',
            key: 'amount',
            render: (value, data) => {
                if (data.nextAmount > data.preAmount) {
                    return <span style={{color: '#489D47'}}> +&nbsp;{value}</span>
                } else {
                    return <span style={{color: 'red'}}>-&nbsp;{value}</span>
                }
            }
        }, {
            title: '变更后金额',
            dataIndex: 'nextAmount',
            key: 'nextAmount'
        }, {
            title: ' 变动时间',
            dataIndex: 'createTime',
            key: 'createTime'
        }]
        return (
            <div>
                <MyForm initForm={initForm} items={formItmes} handleSearch={this.handleSearch}/>
                <Spin spinning={loading}>
                    <Table dataSource={tableData.rows} columns={columns} pagination={false} scroll={{x: true}}/>
                    <Pagination
                        style={{marginTop: 10, marginBottom: 20}}
                        total={tableData.total}
                        showTotal={total => `共 ${total} 项`}
                        pageSizeOptions={['10', '20', '50', '100', '500']}
                        showSizeChanger
                        onShowSizeChange={this.onShowSizeChange}
                        pageSize={pageSize}
                        current={curPage}
                        onChange={this.handlePageChange}
                    />
                </Spin>
            </div>
        )
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(CashChange))
